<template>
  <div class="content">
    <div class="top">
      地理实体数据更新维护及自然资源实体数据生产
      <!-- 登录的用户 -->
      <div class="user-con">
        <UserNav />
      </div>
    </div>
    <div class="middle">
      <div class="left">
        <div class="menu">
          <div
            class="item"
            :class="{ active: choseMenu == '任务列表' }"
            @mouseover="hoveredItem = '任务列表'"
            @mouseleave="hoveredItem = null"
          >
            <div class="icon">
              <img :src="getImageSrc(choseMenu, '任务列表')" />
            </div>
            <div class="text">任务列表</div>
          </div>

          <div
            class="item"
            :class="{ active: choseMenu == '其他菜单' }"
            @mouseover="hoveredItem = '其他菜单'"
            @mouseleave="hoveredItem = null"
          >
            <div class="icon">
              <img :src="getImageSrc(choseMenu, '其他菜单')" />
            </div>
            <div class="text">其他菜单</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="up"></div>
        <div class="down">
          <div class="panel">
            <taskList v-if="choseMenu == '任务列表'" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import UserNav from "@/components/UserNav";
import taskList from "./taskList.vue";
export default {
  components: {
    taskList,
    UserNav,
  },
  computed: {},
  data: () => {
    return {
      choseMenu: "任务列表",
      hoveredItem: null, // 当前悬停的菜单
      menulist: [
        {
          name: "任务列表",
        },
        {
          name: "其他菜单",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    getImageSrc(choseMenu, item) {
      const filepath = require.context(
        "@/assets/images/任务列表",
        false,
        /\.png$/
      );

      const images = {
        任务列表: {
          default: filepath("./任务列表.png"),
          selected: filepath("./任务列表-白.png"),
        },
        其他菜单: {
          default: filepath("./其他.png"),
          selected: filepath("./其他-白.png"),
        },
      };

      // 根据条件返回相应的路径
      if (item in images) {
        return item === choseMenu || item === this.hoveredItem
          ? images[item].selected
          : images[item].default;
      }

      return null; // 如果没有匹配的项，返回 null
    },
  },
};
</script>
  
<style lang="less" scoped>
.content {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #f2f3f7;
  .top {
    height: 0.8rem;
    line-height: 0.8rem;
    background: linear-gradient(90deg, #081950 0%, #153588 100%);
    box-shadow: 0rem 0.06rem 0.12rem 0rem rgba(0, 0, 0, 0.1);
    font-family: Tensentype-RuiHeiJ, Tensentype-RuiHeiJ;
    font-weight: normal;
    font-size: 0.24rem;
    color: #ffffff;
    text-align: left;
    padding-left: 0.3rem;
    position: relative;
    .user-con{
      position: absolute;
      right: 1rem;
      top: 0;
      margin-left: 1rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 0.15rem;
      color: white;
      cursor: pointer;
    }
  }

  .middle {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      width: 2.4rem;
      height: 100%;
      background: #ffffff;
      box-shadow: 0.08rem 0.02rem 0.12rem 0rem rgba(0, 0, 0, 0.1);
      z-index: 999;
      .menu {
        margin-top: 0.48rem;
        .item {
          width: 2.4rem;
          height: 0.75rem;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-end; /* 元素靠右对齐 */
          cursor: pointer;
          margin-bottom: 0.2rem;
          .icon {
            width: 0.22rem;
            height: 0.18rem;
            color: #383838;
            position: relative;
          }
          .icon img {
            width: 100%; /* 使 img 撑满父容器 */
            height: 100%; /* 使 img 撑满父容器 */
            position: absolute;
            left: 0;
            top: 0;
          }
          .text {
            font-family: SourceHanSansCN;
            font-size: 0.2rem;
            font-weight: 400;
            color: #383838;
            margin-left: 0.18rem;
            margin-right: 0.68rem;
          }
        }
        .item.active,
        .item:hover {
          width: 2.4rem;
          height: 0.75rem;
          background: url("~@/assets/images/任务列表/形状结合.png") no-repeat
            center;
          background-position-x: right;
          background-size: contain;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-end; /* 元素靠右对齐 */
          cursor: pointer;
          margin-bottom: 0.2rem;
          .icon {
            width: 0.22rem;
            height: 0.18rem;
            color: white;
            position: relative;
          }
          .icon img {
            width: 100%; /* 使 img 撑满父容器 */
            height: 100%; /* 使 img 撑满父容器 */
            position: absolute;
            left: 0;
            top: 0;
          }
          .text {
            font-family: SourceHanSansCN;
            font-weight: bold;
            font-size: 0.2rem;
            color: #ffffff;
            margin-left: 0.18rem;
            margin-right: 0.68rem;
          }
        }
        .item.active::before,
        .item:hover::before {
          content: "";
          position: absolute;
          left: 0%;
          top: 25%;
          width: 0.06rem;
          height: 0.3rem;
          background: #3364fe;
          border-radius: 0.03rem;
        }
      }
    }

    .right {
      width: calc(100% - 2.4rem);
      height: 100%;
      z-index: 10;
      .up {
        width: 100%;
        height: 0.52rem;
        background: #ffffff;
      }

      .down {
        width: 100%;
        height: 7.7rem;
        padding: 0.2rem;
        // box-sizing: border-box;
        background: #f2f3f7;
        .panel {
          width: 97%;
          height: 100%;
          background: #ffffff;
        }
      }
    }
  }
}
</style>
  